import { observer } from 'mobx-react-lite';
import useStore from '@/context/useStore';
import React, { useState, useEffect } from 'react';
import { Table, Input, Checkbox, Pagination } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import { IAskAndAnswerItem, IAskAndAnswerList } from '@/utils/questionHandle';
import styles from "./Modals.less"
const columns = [
    {
        title: '问题名称',
        dataIndex: 'questionTitle',
    },
    {
        title: '问题名称',
        dataIndex: 'questionTitle',
    },
    {
        title: '类型',
        dataIndex: 'typeName',
    },
    {
        title: '发起人',
        dataIndex: 'author',
    },
    {
        title: '发起时间',
        dataIndex: 'createTime',
    },
    {
        title: '来源',
        dataIndex: 'source',
    },
];
const typeList = [{ name: "全部", type: "" },
{ name: "实训", type: "0" },
{ name: "答辩", type: "4" },
{ name: "面试", type: "1" },
{ name: "工作", type: "2" },
{ name: "其他", type: "3" },
];

const Modals: React.FC = () => {
    //mobx 状态库
    let { Handle, Modals } = useStore()

    let params: IAskAndAnswerItem = { questionTitle: "", type: "", isRight: "0", pageNum: 1, pageSize: 10 }

    useEffect(() => {
        if (Modals.type) {
            params = { ...params, questionTitle: Modals.questionTitle, type: Modals.type, isRight: Modals.isRight, pageNum: Modals.pageNum, pageSize: 10 }
        } else {
            params = { ...params, questionTitle: Modals.questionTitle, type: Modals.type, isRight: Modals.isRight, pageNum:Modals.pageNum, pageSize: 10 }
        }
        Modals.getaskAndAnswer(params)
    }, [Modals.type, Modals.questionTitle, Modals.isRight,Modals.pageNum])

    const rowSelection = {
        onChange: (selectedRowKeys: React.Key[], selectedRows: IAskAndAnswerList[]) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
    };
    function onChange(e: { target: { checked: any; }; }) {
        console.log(`checked = ${e.target.checked}`);
    }
    return (
        <>
            <div className={styles.typeBox}>
                <span>类型:</span>
                {
                    typeList.map((item => {
                        return <span key={item.type}
                            onClick={() => { Modals.setType(item.type) }}
                            className={item.type == Modals.type ? styles.active : ""}
                        >{item.name}</span>
                    }))
                }
            </div>
            <div className={styles.searchBox}>
                <Checkbox onChange={(e) => { Modals.setIsRight(e.target.checked) }}>仅显示有正确答案</Checkbox>
                <Input placeholder="搜索问答"
                    suffix={<SearchOutlined onClick={() => { Modals.setQuestionTitle(Modals.title) }} />}
                    style={{ width: 160 }}
                    onChange={e => Modals.setTitle(e.target.value)} onKeyDown={e => {
                        if (e.keyCode === 13) {
                            Modals.setQuestionTitle(Modals.title)
                        }
                    }} />
            </div>
            <div className={styles.tableBox}>
                <Table
                    rowSelection={{ ...rowSelection, }}
                    columns={columns}
                    dataSource={Modals.askAndAnswerList}
                    rowKey="answerId"
                    pagination={false}
                />
            </div>
            <div className={styles.pageBox}>
                <Pagination defaultCurrent={1} total={Modals.askAndAnswerListLen} 
                 onChange={(e) => { Modals.setPAgeNum(e) }}
                />
            </div>
        </>
    )
}

export default observer(Modals)